<template>
  <ul class="root">
    <li class="data"
        v-for="(city, index) of dataList"
        :key="index"
        @click="clickHandler"
    >{{city}}</li>
  </ul>
</template>

<script>
export default {
  name: 'OneSixth',
  data () {
    return {
      flag: false
    }
  },
  props: {
    dataList: {
      type: Array,
      required: true,
      default () {
        return []
      }
    }
  },
  methods: {
    clickHandler (event) {
      this.$emit('click', event.target.innerText)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.data
  color: #212121
  font-size: .28rem
  height: .9rem
  width: 16.67%
  line-height: .9rem
  text-align: center
  background: #fff
  display: inline-block
  margin-bottom: -1px
  ellipsis()
</style>
